<template>
	<view class="page-container">

		<view class="header">
			<st-top-search value="" :placeholder="keyword" @searchSubmit="searchSubmit"></st-top-search>
			<view class="module-product-bar" v-if="tabGroup.length">
				<v-tabs id="moduleProductTab" class="module-product-tab" auto v-model="tabCurrent" :tabs="tabGroup"
				 :field="'attrname'" :activeColor="activeColor" :lineColor="lineColor" @change="clickTab">
				</v-tabs>
			</view>
		</view>

		<view class="module-product">
			<view class="product-view-group" v-if="list.length">
				<block v-for="(item,index) in list" :key="index">

					<block v-if="typeid == 4 || typeid == 101 || typeid == 115">
						<view class="product-view-group__item" @click="jumpDetail(typeid,item.id)">
							<view class="product-view-group__item__hd">
								<image class="img" :src="item.litpic" mode="aspectFill"></image>
							</view>
							<view class="product-view-group__item__bd">
								<view class="title">{{item.title}}</view>
								<view v-if="typeid==101" class="custom">{{item.abstract}}</view>
								<view v-else class="custom">{{item.summary}}</view>
								<view class="info">
									<view class="date">{{item.addtime}}</view>
									<view class="data">
										<text class="label">{{item.shownum}}浏览</text>
										<text class="label" v-if="typeid == 4">{{item.commentnum}}条评论</text>
									</view>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="product-view-group__item" @click="jumpDetail(typeid,item.id)">
							<view class="product-view-group__item__hd">
								<!-- <text class="label">成都出发</text> -->
								<image class="img" :src="item.litpic" mode="aspectFill"></image>
							</view>
							<view class="product-view-group__item__bd">
								<view class="title">{{item.title}}</view>
								<view class="attr">
									<text class="label" v-for="(attr,attrIndex) in item.attrlist" :key="attrIndex">{{attr.attrname}}</text>
								</view>

								<view v-if="typeid == 1 || typeid==3 || typeid == 114 || typeid == 13" class="custom">{{item.sellpoint}}</view>
								<view v-if="typeid == 2 || typeid == 5" class="custom">{{item.address}}</view>
								<view class="info">
									<view v-if="item.price > 0" class="price"><text class="jg">{{globalExchangeRate}}<text class="num">{{item.price}}</text></text>起</view>
									<view v-else class="price"><text class="jg"><text class="num">电询</text></text></view>

									<view class="data">
										<text v-if="typeid == 1||typeid == 114|| typeid == 13" class="label">{{item.sellnum}}人出游</text>
										<text v-if="typeid == 2 || typeid==3 || typeid == 5 " class="label">{{item.commentnum}}条点评</text>

										<text class="label" v-if="cfg_satisfy==1">{{item.satisfyscore}}%满意</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
			</view>
			<!-- 列表 -->

			<!-- 无数据 -->
			<st-empty-msg v-if="total <= 0 && loadStatus =='noMore'" :noMsg="noMsg" handeTxt="去首页看看" @onClick="jumpIndex"></st-empty-msg>

			<!-- 加载动画 -->
			<uni-load-more v-if="total > 0" :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import stTopSearch from "@/components/st-top-search.vue"
	import vTabs from "@/components/v-tabs/v-tabs.vue"
	import stEmpptyMsg from '@/components/st-empty-msg/st-empty-msg.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import global_config from "@/config.js"
	import {
		satisfyscore
	} from "@/utils/utils.js"
	import {
		getProDetailPage,toAppIndex
	} from "@/utils/toPath.js"
	export default {
		components: {
			stTopSearch,
			vTabs,
			stEmpptyMsg,
			uniLoadMore
		},
		data() {
			return {
				tabCurrent: 0,
				tabGroup: [],
				openProduct: [],
				activeColor: "#2dbb55",
				lineColor: "#2dbb55",
				keyword: '',
				startcity: '',
				pinyin: '',
				typeid: '',
				page: 1,
				pagesize: 10,
				total: 1,
				loadStatus: 'more',
				noMsg: '抱歉，没有找到符合条件的产品！',
				list: [],
				cfg_satisfy:0,
				shareData:{}
			}
		},
		onLoad(options) {
			this.cfg_satisfy=uni.getStorageSync('cfg_satisfy')
			this.openProduct = global_config.openProduct;
			this.openArticle = global_config.openArticle;
			//默认搜索条件
			
			if(options.keyword){
				this.keyword = decodeURIComponent(options.keyword);
				this.tabCurrent = options.tabCurrent;
			}else{
				this.keyword = uni.getStorageSync('uniHotSearchDefault');
			}
			
			
			this.getSearchConfig();
		},
		onReachBottom() {
			this.productList();
		},
		mounted() {
			setTimeout(() => {
				let query = uni.createSelectorQuery();
				if(this.tabGroup.length){
					query.select('#moduleProductTab').boundingClientRect(res => {
						this.offsetTop = res.top
					}).exec()
				}
			}, 500)
		},
		
		// #ifdef MP-ALIPAY || MP-BAIDU || MP-WEIXIN || MP-TOUTIAO
		onShareAppMessage(res) { //右上角分享 微信小程序、百度小程序、字节跳动小程序、支付宝小程序
			if (this.shareData) {
				return this.shareData
			}
		},
		onShareTimeline() { // 分享朋友圈
		  if (this.shareData) {
		  	return this.shareData
		  }
		},
		// #endif
		
		methods: {
			// 获取全局搜索基础配置
			async getSearchConfig() {
				let params = {
					method: 'api/v2/search/search_config',
					keyword: this.keyword,
					startcity: this.startcity,
					// pinyin: this.pinyin
					
				};
				this.tabGroup = [];
				uni.showLoading({
					title: '加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();

				if (res.status) {					
					let tabGroup = [];
					if(res.data.has_search.length == 0){
						this.total = 0;
						this.loadStatus = 'noMore';
						this.list=[]
					    return false;
					}
					
					res.data.has_search.map(item => {
						
						let typeid = parseInt(item.typeid);
						if (this.openProduct.includes(typeid) || this.openArticle.includes(typeid) || typeid>199) {
							let tab = {
								attrname: item.shortname,
								id: item.id,
								typeid: item.typeid,
								pinyin: item.pinyin
							};
							tabGroup.push(tab);
						}
					})

					this.tabGroup = tabGroup;
					if(this.tabCurrent !=0){
						this.typeid = tabGroup[this.tabCurrent].typeid;
						this.pinyin = tabGroup[this.tabCurrent].pinyin;
					}else{
						this.tabCurrent = 0;
						this.typeid = tabGroup[0].typeid;
						this.pinyin = tabGroup[0].pinyin;
					}
					
					
					this.productList();
				}
			
			},
			// 产品搜索
			async productList() {

				if (this.loadStatus != 'more') {
					return;
				}
				let params = {
					method: 'api/v2/search/search_more',
					keyword: this.keyword,
					startcity: this.startcity,
					pinyin: this.pinyin,
					page: this.page,
					pagesize: this.pagesize
				};

				this.loadStatus = 'loading';
				if (this.page == 1) {
					this.list = [];
				}

				let res = await this.$http(params);

				if (res.status) {
					this.list = [...this.list, ...res.data.list];
					this.total = res.data.total;
					this.loadStatus = 'noMore';
					let nowsize = this.page * this.pagesize;
					if (nowsize < this.total && this.total > 0) {
						this.page = res.data.page;
						this.loadStatus = 'more';
					}
					
					
					let navTitle = this.keyword ? ( this.keyword + '列表' ) : '搜索列表';
					
					uni.setNavigationBarTitle({
						title: navTitle
					});
					
					// #ifdef H5
					// 页面分享
					this.$share({
						title:navTitle,
						url:'/pages/index/search?keyword=' + encodeURIComponent(this.keyword) +'&tabCurrent=' + this.tabCurrent
					});
					// #endif
					
					
					// #ifdef MP-ALIPAY || MP-BAIDU || MP-WEIXIN || MP-TOUTIAO
					//分享页面
					this.sharePage(navTitle)
					// #endif
					
				}
								
			},
			// 满意度
			getSatisfyScore(str) {
				return satisfyscore(str);
			},
			//产品详情
			jumpDetail(typeid, id) {
				let url = getProDetailPage(typeid, {
					id: id
				});
				uni.navigateTo({
					url: url
				})
			},
			// 切换导航
			clickTab(e) {
				uni.redirectTo({
					url:'/pages/index/search?keyword=' + this.keyword +'&tabCurrent=' + e
				})
			},
			// 搜索
			searchSubmit(e){
				uni.redirectTo({
					url:'/pages/index/search?keyword=' + e +'&tabCurrent=' + this.tabCurrent
				})
			},
			// 前往首页
			jumpIndex(){
				toAppIndex();
			},
			
			// #ifdef MP-ALIPAY || MP-BAIDU || MP-WEIXIN || MP-TOUTIAO
			//分享页面
			async sharePage(title) {
				let shareData = await this.$mpShare({
					share_type: 1,
					info:{
						title: title
					}
				});
				if (shareData) {
					this.shareData = shareData;
				}
			},
			// #endif
		}
	};
</script>

<style lang="scss">
	@mixin ellipse {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	@mixin ellipses {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
		overflow: hidden;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 111;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
	}

	.module-product-bar {
		position: fixed;
		top: 184rpx;
		/* #ifndef H5 */
		top: 96rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 100;
		border-bottom: 2rpx solid $uni-border-color;
		background-color: $uni-bg-color;
	}

	.product-view-group {
		padding: 188rpx 0 0;
		background: #fff;

		&__item {
			display: -webkit-box;
			padding: 20rpx 24rpx;
			position: relative;

			&:after {
				content: "";
				display: block;
				height: 0;
				position: absolute;
				left: 24rpx;
				right: 24rpx;
				bottom: 0;
				border-bottom: 2rpx solid #f2f2f2;
			}

			&:last-child {
				&:after {
					display: none;
				}
			}

			&__hd {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				overflow: hidden;
				border-radius: 8rpx;

				.img {
					width: 180rpx;
					height: 180rpx;
				}

				.label {
					color: $uni-text-color-inverse;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 12rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					font-size: 20rpx;
					border-bottom-right-radius: 16rpx;
					background: rgba(0, 0, 0, .5);
				}

				.state {
					color: $uni-text-color-inverse;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					z-index: 10;
					padding: 8rpx 0;
					text-align: center;
					font-size: $uni-font-size-mini;
					background: rgba(0, 0, 0, .5);
				}
			}

			&__bd {
				-webkit-box-flex: 1;
				margin-left: 20rpx;

				.title {
					line-height: 40rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					max-height: 80rpx;
					font-size: 28rpx;
				}

				.attr {
					padding: 10rpx 0 0;
					white-space: nowrap;
					overflow: hidden;
					font-size: 0;

					.label {
						color: #2dbb55;
						display: inline-block;
						padding: 4rpx 8rpx;
						margin-right: 6rpx;
						border-radius: 6rpx;
						font-size: 20rpx;
						background: #eaf8ee;
					}
				}

				.periods {
					color: $uni-text-color-deep;
					margin-top: 12rpx;
					font-size: $uni-font-size-sm;
				}

				.address {
					color: $uni-text-color-deep;
					margin-top: 12rpx;
					font-size: $uni-font-size-sm;
				}

				.custom {
					@include ellipses;
					color: $uni-text-color-deep;
					margin-top: 12rpx;
					font-size: $uni-font-size-sm;

					.label {
						&:last-child {
							margin-left: 60rpx;
						}
					}
				}

				.info {
					color: #999;
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					margin-top: 16rpx;
					font-size: 20rpx;

					.price {
						.jg {
							color: #f70;

							.num {
								font-size: 32rpx;
								font-weight: bold;
								font-family: Arial, Helvetica, sans-serif;
							}
						}
					}

					.date {}

					.data {
						.label {
							margin-left: 24rpx;
							font-family: Arial, Helvetica, sans-serif;
						}
					}
				}
			}
		}
	}
</style>
